全て展開
すべて折りたたむ以下の手順はHTML5ビューワでレポートを表示する方法を紹介します。
- Visual Studioで新規のWebアプリケーションプロジェクトを作成し、新しいHTMLページをプロジェクトに追加します。
- 以下のファイル（デフォルトでは、...\ActiveReportsNET11\Deployment\Htmlフォルダに配置されています）をコピーして、任意の場所に配置します。
- GrapeCity.ActiveReports.Viewer.Html.js
- GrapeCity.ActiveReports.Viewer.Html.min.js
- GrapeCity.ActiveReports.Viewer.Html.css
- ja.txt
- 対象のHTMLページで、GrapeCity.ActiveReports.Viewer.Html.css、GrapeCity.ActiveReports.Viewer.Html.js、および以下の依存関係への参照を追加します。
- jQuery 1.9.0以上
- Bootstrap 3.0
- Knockout.js 2.3.0以上
メモ: jQueryのような依存関係はコンテンツデリバリーネットワーク（CDN）から取得できます。また、ローカルにコピーすることもできます。 <body>タグと</body>タグの間に貼り付けます。 コードのコピー<link rel="stylesheet" href="GrapeCity.ActiveReports.Viewer.Html.css" > <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-min.js" type="text/javascript"></script> <script src="Scripts/GrapeCity.ActiveReports.Viewer.Html.js" type="text/javascript"></script>
- 対象のHTMLページで、bootstrap.min.cssへの参照を追加します。
<head>タグと</head>タグの間に貼り付けます。 コードのコピー<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
- 対象のHTMLページで、HTML5ビューワを格納するDIV要素を追加します。
<body>タグと</body>タグの間に貼り付けます。 コードのコピー<div id="viewer" style="width:600px;height:480px;"></div>
- ［プロジェクト］メニューから［新しい項目の追加］を選択します。
-
［新しい項目の追加］ダイアログで、［ActiveReports 11.0J Webサービス］を選択し、［追加］ボタンをクリックします。ActiveReports 11.0J Webサービスは、HTML5ビューワの動作に必要なものです。
メモ: HTML5ビューワでActiveReports Serverにホストされているレポートを直接表示することも可能です。その場合、レポートの生成はActiveReports Server上で行われるので、ActiveReports 11.0J Webサービスの追加は不要です。 - Visual Studioプロジェクトにレポートを追加します。詳細については、「プロジェクトにレポートを追加する」を参照してくだざい。
-
Licenses.licxファイルを開き、以下の参照を追加します。アプリケーションへのライセンスの組み込みについての詳細は、「アプリケーションのライセンスの組み込み」を参照してください。
licenses.licxファイル内に貼り付けます。 コードのコピーGrapeCity.ActiveReports.SectionReport, GrapeCity.ActiveReports.v11
GrapeCity.ActiveReports.PageReport, GrapeCity.ActiveReports.v11
GrapeCity.ActiveReports.Export.Pdf.Section.PdfExport, GrapeCity.ActiveReports.Export.Pdf.v11
GrapeCity.ActiveReports.Web.WebViewer, GrapeCity.ActiveReports.Web.v11メモ: - ページレポート、RDLレポート、セクションレポート（XML）、ActiveReports Webサービスをプロジェクトに追加した時には、licenses.licxファイルが自動的に作成されず、ライセンス文字列も追加されません。 詳細については、「アプリケーションのライセンスの組み込み」を参照してください。
- ActiveReports 11.0J Serverで描画拡張機能を使用する場合は、Agentフォルダに配置されているGrapeCity.ActiveReports.configファイルのUsePdfExportFilterプロパティを「True」に設定します。
-
HTML5ビューワを初期化する以下のコードを追加します。
ActiveReports11.0J Webサービスを使用してレポートを実行する場合
<body>タグと</body>タグの間に貼り付けます。 コードのコピー<script type="text/javascript"> $(function () { var viewer = GrapeCity.ActiveReports.Viewer( { element: '#viewer', report: { id: "Report.rdlx" }, reportService: { url: '/ActiveReports.ReportService.asmx' }, uiType: 'desktop', // 日本語のリソースファイルのパスを指定します。 localeUri: 'ja.txt', }); }); </script>メモ: セクションレポートを表示する場合は、reportIDをクラスの完全名にします。 ActiveReports 11.0J Server上のレポートを実行する場合
HTML5ビューワを初期化する以下のコードを追加します。セキュリティトークンの取得方法については、「セキュリティトークンの取得」を参照してください。
JavaScript コードのコピー$(function ()
{
var viewer = GrapeCity.ActiveReports.Viewer(
{
element: '#viewer',
report: {
id: "myreport"},
reportService: {
url: 'http://myAR11server.com/ReportService.svc/json/',
securityToken: securityToken,
resourceHandler : 'http://myAR11server.com/cache/'
},
uiType: 'desktop',
documentLoaded: function reportLoaded()
{
console.log(viewer.pageCount);
},
reportLoaded: function (reportInfo)
{
console.log(reportInfo.parameters);
},error: function (error)
{
console.log("error");
}});
});上記のJavaScriptの代わりに、RestAPIエンドポイントURLを使用して初期化することもできます。
JavaScript コードのコピー$(function ()
{
var viewer = GrapeCity.ActiveReports.Viewer(
{
element: '#viewer',
report: {
id: "myreport"},
reportService: {
url: 'http://myAR11server.com/api/',
securityToken: securityToken,
resourceHandler : 'http://myAR11server.com/cache/'
},
uiType: 'desktop',
documentLoaded: function reportLoaded()
{
console.log(viewer.pageCount);
},
reportLoaded: function (reportInfo)
{
console.log(reportInfo.parameters);
},error: function (error)
{
console.log("error");
}});
});次に、以下のコードをActiveReports 11 Serverウェブサイトのweb.configファイルのsystem.webServerセクションに追加します。
XML コードのコピー<system.webServer>
<httpProtocol>
<customHeaders>
<add name="Access-Control-Allow-Origin" value="*" />
<add name="Access-Control-Allow-Headers" value="AuthToken, Authorization, Origin, Content-Type, Accept, X-Requested-With" />
</customHeaders>
</httpProtocol>
...
</system.webServer>